<template>
  <div>
    <div class="left-col">{{ name }}</div>
    <div class="right-col txt-filter-item">
      <el-input
        placeholder="è¯·è¾“å…¥"
        size="small"
        v-model="inputVal"
        :clearable="true"
        style="width:300px"
        @clear="onClear"
      >
        <i slot="suffix" class="el-input__icon el-icon-search" @click="onClick"></i>
      </el-input>
    </div>
  </div>
</template>
<script>
export default {
  props: ['name', 'value'],
  data() {
    return { inputVal: '' };
  },
  watch: {
    value: {
      handler(val) {
        this.inputVal = val;
      },
      immediate: true
    }
  },
  methods: {
    onClear() {
      this.$emit('update:value', '');
      console.log('filter clear', this.name, this.inputVal);
      this.$emit('onChange');
    },
    onClick() {
      this.$emit('update:value', this.inputVal);
      console.log('filter click', this.name, this.inputVal);
      this.$emit('onChange');
    }
  }
};
</script>
<style>
.txt-filter-item {
  text-align: left;
}
.txt-filter-item .el-input__suffix {
  cursor: pointer;
}
.txt-filter-item .el-input__suffix .el-input__icon {
  width: 30px;
}
.txt-filter-item .el-input__suffix:hover {
  color: #409eff;
}
</style>
